import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  selector: 'app-input-clear',
  standalone: true,
  imports: [NzInputModule, NzIconModule, FormsModule, CommonModule],
  template: `
    <div class="demo">
      <nz-input-group [nzSuffix]="clearText1">
        <input type="text" nz-input [(ngModel)]="text1" />
      </nz-input-group>
      <ng-template #clearText1>
        @if(text1) {
        <span nz-icon nzType="close-circle" (click)="text1 = ''"></span>
        }
      </ng-template>

      <div class="my-2">
        <nz-input-group
          [nzSuffix]="clearText2"
          class="ant-input-affix-wrapper-textarea-with-clear-btn"
        >
          <textarea nz-input [(ngModel)]="text2"></textarea>
        </nz-input-group>
        <ng-template #clearText2>
          @if(text2) {
          <span
            nz-icon
            nzType="close-circle"
            (click)="text2 = ''"
            class="ant-input-clear-icon"
          ></span>
          }
        </ng-template>
      </div>
    </div>
  `,
  styles: ``,
})
export class InputClearComponent {
  text1 = '';
  text2 = '';
  //  class="ant-input-affix-wrapper-textarea-with-clear-btn"
  // class="ant-input-clear-icon"
}
